import {useRef,useState} from 'react'
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
import SaveIcon from '@mui/icons-material/Save'
import CancelIcon from '@mui/icons-material/Cancel'
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
import { useNavigate } from 'react-router-dom';
import {userService} from '../../services';
import { useMessage } from '../../hooks';

export default function CreateUser() {
    const { showError, showSuccess } = useMessage();
    const userNameRef = useRef('');
    const emailRef = useRef('michael@qq.com');
    const passwordRef = useRef('');
    const [loading, setLoading] = useState(false);
    const [role, setRole] = useState("User");   
    const navigate = useNavigate();

    const onChangeRole = (e) => {
        setRole(e.target.value);
    };

    const onSaveUser = async () => {
        setLoading(true);

        const formValues = {
            UserName: userNameRef.current.value,
            Email: emailRef.current.value,
            Password: passwordRef.current.value,
            Role: role,
        }

        if (formValues.UserName && formValues.Email && formValues.Password) {
            try {
                await userService.createUser(formValues);
                showSuccess('saved data successfully');
                navigate("/users");                
            } catch (err) {
                showError(err);
            } finally {
                setLoading(false);
            }

        } else {
            showError('errors: required field have did not enter value!');
            setLoading(false);
        }
    }
    return (
        <>
            <Box component="form" sx={{
                '& .MuiTextField-root': { mt: 3, width: '100%' },
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
            }} noValidate autoComplete="off">
                <Stack sx={{ width: '40%' }}>
                    <h2>Create User </h2>

                    <TextField required inputRef={userNameRef}
                        id="outlined-required"
                        label="User name"
                    />

                    <TextField
                        required fullWidth inputRef={emailRef}
                        id="outlined-disabled"
                        label="Email"
                    />

                    <TextField required inputRef={passwordRef}
                        id="outlined-password-input"
                        label="Password"
                        type="password"
                        autoComplete="current-password"
                    />
                    <FormControl fullWidth sx={{ mt: 3 }}>
                        <InputLabel id="demo-simple-select-label">Role</InputLabel>
                        <Select
                            labelId="demo-simple-select-label"
                            id="demo-simple-select"
                            value={role}
                            label="Role"
                            onChange={onChangeRole}>
                            <MenuItem value={"User"}>User</MenuItem>
                            <MenuItem value={"Admin"}>Admin</MenuItem>
                        </Select>
                    </FormControl>
                    <Stack sx={{ mt: 3 }} direction='row' spacing={2}>
                        <Button
                            color="primary"
                            onClick={onSaveUser}
                            loading={loading}
                            loadingPosition="start"
                            startIcon={<SaveIcon />}
                            variant="contained">
                            Save
                        </Button>
                        <Button
                            color="primary"
                            onClick={() => navigate(-1)}
                            loading={loading}
                            loadingPosition="start"
                            startIcon={<CancelIcon />}
                            variant="outlined">
                            Cancel
                        </Button>
                    </Stack>
                </Stack>
            </Box>           
        </>
    )
}


